// import logo from './logo.svg';
import './App.css';

// function App() {
//   return (
//     <div className="App">
//       <header className="App-header">
//         <img src={logo} className="App-logo" alt="logo" />
//         <p>
//           Edit <code>src/App.js</code> and save to reload.
//         </p>
//         <a
//           className="App-link"
//           href="https://reactjs.org"
//           target="_blank"
//           rel="noopener noreferrer"
//         >
//           Learn React
//         </a>
//       </header>
//     </div>
//   );
// }
import React, { Component, Suspense, lazy } from 'react';
// const Child = lazy(() => import('./components/child'));
import Child from "./components/child";
import { ThemeContext, themes } from "./components/contextCom"
import FancyButton from "./components/refCom"
const Celsius = lazy(() => import("./components/celsius"));
const Fahrenheit = lazy(() => import("./components/fahrenheit"))

class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            celsius: "",
            fahrenheit: "",
            theme: themes.dark
        }
        this.ref = React.createRef();
        this.rootRef = React.createRef()
    }
    toCelsius(fahrenheit) {
        return (fahrenheit - 32) * 5 / 9;
    }

    toFahrenheit(celsius) {
        return (celsius * 9 / 5) + 32;
    }
    handleCelsius = (value) => {
        let f = value && isFinite(value) ? this.toFahrenheit(Number(value)) : "";
        this.setState({
            celsius: value,
            fahrenheit: f
        })
    }
    handleFahrenheit = (value) => {
        this.setState({
            fahrenheit: value,
            celsius: value && isFinite(value) ? this.toCelsius(Number(value)) : ""
        })
    }
    toggleTheme = () => {
        this.setState(state => ({
            theme:
                state.theme === themes.dark
                    ? themes.light
                    : themes.dark,
        }));
    }
    showRef = () => {
        let color = this.ref.current.style.color;
        this.ref.current.style.color = color=="red"?"blue":"red";
    }
    componentDidMount() {
        console.log(this.rootRef.current)
    }
    shouldComponentUpdate(){
        // console.log(1)
        //此生命周期返回false 则不渲染render
        // return false;
    }
    createMarkup() {
        // dangerouslySetInnerHTML 取代原生 innerHTML
        return {__html: 'First &middot; Second'};
    }
    render() {
        return (
            <div className="root" ref={this.rootRef} >
                <div dangerouslySetInnerHTML={this.createMarkup()} />
                <FancyButton ref={this.ref} children="测试ref" showRef={this.showRef}></FancyButton>
                <ThemeContext.Provider value={this.state.theme}>
                    <Child name="啦啦啦" changeTheme={this.toggleTheme}></Child>
                    <ThemeContext.Consumer>
                        {({background,foreground})=>(
                            <div>background:{background}   foreground:{foreground}</div>
                        )}
                </ThemeContext.Consumer>
                </ThemeContext.Provider>
                <Suspense fallback={<div>Loading...</div>}>
                    <Celsius celsius={this.state.celsius} handleCelsius={this.handleCelsius} header={
                        <Child name="头部" />
                    } footer={
                        <div>底部</div>
                    }>

                    </Celsius>
                    <Fahrenheit fahrenheit={this.state.fahrenheit} handleFahrenheit={this.handleFahrenheit}>
                        <div>相当于vue插槽</div>
                    </Fahrenheit>
                </Suspense>

            </div>
        )
    }
}
export default App;
